<template>
    <div class="app_container">
        <el-form :inline="true" :model="filter" size="small">
            <el-form-item label="启用状态">
                <el-select v-model="filter.status" placeholder="优惠券状态" clearable style="width:120px;">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="草稿" value="DRAFT"></el-option>
                    <el-option label="发放中" value="ACTIVE"></el-option>
                    <el-option label="暂停发放" value="PAUSED"></el-option>
                    <el-option label="已过期" value="EXPIRED"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="优惠券名称">
                <el-input placeholder="请输入" v-model="filter.name" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onFilter">查询</el-button>
            </el-form-item>
        </el-form>

        <!-- <el-button v-role="['/tmsTag/add']" type="primary" @click="openAdd" style="margin-bottom: 10px;">新增标签</el-button> -->
        <el-button type="primary" @click="openAdd" style="margin-bottom: 10px;">新增优惠券</el-button>

        <!-- 列表 -->
        <el-table :data="tableData" border row-key="key">
            <el-table-column prop="id" label="id" width="80"></el-table-column>
            <el-table-column prop="name" label="优惠券名称" width="200"></el-table-column>
            <el-table-column prop="type_text" label="券类型" width="90"></el-table-column>
            <!-- <el-table-column prop="scope_text" label="适用范围" width="100"></el-table-column> -->
            <el-table-column prop="threshold" label="使用门槛" width="100"></el-table-column>
            <el-table-column prop="discount" label="优惠金额/折扣比例" width="90"></el-table-column>
            <el-table-column label="总库存" width="100">
                <template slot-scope="scope">{{ scope.row.totalQuantity == -1 ? '不限量' : scope.row.totalQuantity }}</template>
            </el-table-column>
            <el-table-column prop="receiveQuantity" label="已领取数量" width="70"></el-table-column>
            <el-table-column prop="limitPerUser" label="每人限领数量" width="80"></el-table-column>
            <el-table-column prop="status_text" label="状态" width="100"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
            <el-table-column label="操作" width="70">
                <template slot-scope="scope">
                    <el-dropdown placement="bottom-start" @command="openSet">
                        <el-button size="mini" type="primary" icon="el-icon-s-tools"></el-button>
                        <el-dropdown-menu slot="dropdown">
                            <!-- <el-dropdown-item v-role="['/gmsTag/update']" :command="{ type: 'edit', item: scope.row }">编辑</el-dropdown-item> -->
                            <el-dropdown-item :command="{ type: 'edit', item: scope.row }">编辑</el-dropdown-item>
                            <!--  v-if="scope.row.status == 'DRAFT' || scope.row.status == 'PAUSED'" -->
                            <el-dropdown-item :command="{ type: 'toggle_status', item: scope.row }">修改状态</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <br />

        <el-row type="flex" justify="center">
            <el-pagination background layout="prev, pager, next" :current-page="filter.pageNum" :page-size="filter.pageSize" :total="total" @current-change="changePage"></el-pagination>
        </el-row>

        <!-- 新增弹窗 -->
        <el-dialog :visible.sync="showAdd" title="新增优惠券">
            <add @onCancel="showAdd = false" @onSubmit="onAddSubmit()"></add>
        </el-dialog>

        <!-- 编辑弹窗 -->
        <el-dialog :visible.sync="showEdit" title="编辑优惠券">
            <edit :editId="editId" @onCancel="showEdit = false" @onSubmit="onEditSubmit()"></edit>
        </el-dialog>

        <!-- 修改弹窗 -->
        <el-dialog :visible.sync="showStatus" title="修改优惠券状态">
            <el-form label-width="140px">
                <el-form-item label="优惠券状态">
                    <el-select v-model="selectStatus">
                        <template v-for="item in statusList">
                            <el-option :label="item.name" :value="item.id" :key="item.id"></el-option>
                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :loading="loading" @click="onConfirmStatus">确定</el-button>
                    <el-button @click="showStatus = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { apiCouponList, apiCouponStatus } from "@/api/coupon.js";
import add from "./add.vue";
import edit from "./edit.vue";
export default {
    name: 'coupon_index',
    components: { add, edit },
    data() {
        return {
            tableData: [],
            total: 0,
            filter: { pageNum: 1, pageSize: 16, name: '', status: '' },
            showAdd: false,
            showEdit: false,
            editId: "",
            showStatus: false,
            statusList: [{ id: 'DRAFT', name: '草稿' }, { id: 'ACTIVE', name: '开始发放' }, { id: 'PAUSED', name: '暂停发放' }, { id: 'EXPIRED', name: '设为失效' }],
            selectStatusId: '',
            selectStatus: '',
            loading: false,
        }
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            apiCouponList(this.filter).then(res => {
                res.data.forEach(item => {
                    switch (item.platform) {
                        case 'FIXED':
                            item.platform_text = '全平台'
                            break;
                        case 'PERCENT':
                            item.platform_text = '指定店铺'
                            break;
                    }
                    switch (item.type) {
                        case 'FIXED':
                            item.type_text = '满减券'
                            break;
                        case 'PERCENT':
                            item.type_text = '折扣券'
                            break;
                        case 'CASH':
                            item.type_text = '现金券'
                            break;
                    }
                    switch (item.scope) {
                        case 'ALL':
                            item.scope_text = '全品类'
                            break;
                        case 'CATEGORY':
                            item.scope_text = '指定类目'
                            break;
                        case 'GOODS':
                            item.scope_text = '指定商品'
                            break;
                    }
                    switch (item.status) {
                        case 'DRAFT':
                            item.status_text = '草稿'
                            break;
                        case 'ACTIVE':
                            item.status_text = '生效中'
                            break;
                        case 'PAUSED':
                            item.status_text = '暂停发放'
                            break;
                        case 'EXPIRED':
                            item.status_text = '已过期'
                            break;
                    }
                });
                this.tableData = res.data;
                this.total = res.total;
                this.filter.pageNum = res.pageNum;
            });
        },
        changePage(page) {
            this.filter.pageNum = page
            this.getData()
        },
        onFilter() {
            this.filter.pageNum = 1
            this.getData()
        },
        // 打开新增弹窗
        openAdd() {
            this.showAdd = true;
        },
        // 子组件确认新增
        onAddSubmit() {
            this.showAdd = false;
            this.getData();
        },
        // 设置
        openSet({ type, item }) {
            switch (type) {
                case "edit":
                    this.editId = item.id
                    this.showEdit = true;
                    break;
                case "toggle_status":
                    this.selectStatusId = item.id;
                    this.selectStatus = item.status;
                    this.showStatus = true;
                    break;
            }
        },
        // 子组件确认编辑
        onEditSubmit() {
            this.showEdit = false;
            this.getData();
        },
        // 修改优惠券状态
        onConfirmStatus() {
            apiCouponStatus(this.selectStatusId, { status: this.selectStatus }).then((res) => {
                if (res.code == 200) {
                    this.$message({ type: "success", message: res.message });
                    this.showStatus = false;
                    this.getData();
                }
            }).catch((err) => {
                console.log(err);
                this.$message({ type: "error", message: err });
            });
        },

    },
}
</script>

<style></style>